<template>
  <footer class="footer">
    <div class="footer-container">
      <div class="footer-logo">
        <h3 class="logo-text">电商助手</h3>
        <p class="logo-desc">让电商运营更简单高效</p>
      </div>

      <div class="footer-links">
        <div class="footer-column">
          <h4 class="footer-title">功能</h4>
          <ul class="footer-menu">
            <li><NuxtLink to="/">SKU生成器</NuxtLink></li>
            <li><NuxtLink to="/">标题生成器</NuxtLink></li>
            <li><NuxtLink to="/feedback">反馈建议</NuxtLink></li>
          </ul>
        </div>

        <div class="footer-column">
          <h4 class="footer-title">关于我们</h4>
          <ul class="footer-menu">
            <li><NuxtLink to="/about">公司介绍</NuxtLink></li>
            <li><NuxtLink to="/about">联系我们</NuxtLink></li>
            <li><NuxtLink to="/about">加入我们</NuxtLink></li>
          </ul>
        </div>

        <div class="footer-column">
          <h4 class="footer-title">帮助</h4>
          <ul class="footer-menu">
            <li><NuxtLink to="/feedback">常见问题</NuxtLink></li>
            <li><NuxtLink to="/feedback">使用指南</NuxtLink></li>
            <li><NuxtLink to="/feedback">提交反馈</NuxtLink></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <p>© {{ new Date().getFullYear() }} 电商助手. 保留所有权利</p>
    </div>
  </footer>
</template>

<style scoped lang="scss">
/* 页脚样式 */
.footer {
  background-color: #f8f9fa;
  padding: 4rem 1rem 2rem;
  color: var(--text-secondary, #4a5568);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
}

.footer-logo {
  flex: 1;
  min-width: 250px;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-purple, #6b46c1);
  margin-bottom: 1rem;
}

.logo-desc {
  font-size: 1rem;
  max-width: 300px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-column {
  min-width: 160px;
}

.footer-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #2d3748);
  margin-bottom: 1.5rem;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 1rem;
}

.footer-menu a {
  color: var(--text-secondary, #4a5568);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-menu a:hover {
  color: var(--primary-purple, #6b46c1);
}

.footer-bottom {
  text-align: center;
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.875rem;
}
</style>
